<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>post/get request test</title>
</head>
<body>
<script type="text/javascript">
  window.onload=function (){
    document.getElementById("myform").onclick=function (){
      //发送ajax post请求
      //1.创建ajax核心对象
      var xhr = new XMLHttpRequest();
      //2.注册回调函数
      xhr.onreadystatechange=function (){
        if (this.readyState == 4) {
          if (this.status == 200) {
              //document.getElementById("mydiv").innerHTML=this.responseText;
              document.getElementById("mydiv2").innerHTML=this.responseText;

          }else{
            alert(this.status);
          }
        }
      }
      //3.开启通道
      //xhr.open("POST","/ajax01/postrequest",true);//get请求信息在url上提交
      xhr.open("POST","/ajax01/formrequest",true);//get请求信息在url上提交
      //4.发送请求
        //怎么模拟Ajax提交form表单呢？设置请求头的内容类型(这行代码非常关键，是模拟form表单提交的关键代码)
        //设置请求头的内容类型必须在open()之后，send()之前
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //post请求：放到send()这个函数的小括号当中的数据，会自动在请求体中提交数据
        //使用JS代码获取用户填写的用户名和密码
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        //注意格式：放在这里的数据就是在请求体当中提交的，格式不能随便写，要遵循http协议
        //name=value&name=value&...
      xhr.send("username="+username+"&password="+password);
    }
  }
</script>
用户名<input type="text" id="username"><br>
密码<input type="password" id="password"><br>
<button id="myform">提交</button>
<div id="mydiv2"></div>

<button id="mybtn">发送ajax post请求</button>
<div id="mydiv"></div>

<!--<form enctype="application/x-www-form-urlencoded"></form>-->
</body>
</html>